<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$cate_name}</title>
    <link rel="stylesheet" href="/static/index/css/detail.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            overflow-x: hidden;
            margin: 0;
            color: #333;
            font-size: .88rem;
            font-size: 14px \9;
            font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;

        }

        ul li {
            list-style: none;
        }

        ul, ol {
            margin-top: 0;
            margin-bottom: 10px;
        }

        .container-all {
            width: 1150px;
            margin: 0 auto;
            font-size: 16px;
        }

        .container-all .body {
            width: 100%;
        }

        .body .body-left {
            width: 850px;
            float: left;
            padding-top: 20px;
        }

        .body-left::after {
            clear: both;
        }
        .l-header{
            width: 100%;
            height: 60px;
            padding-top: 15px;
            box-sizing: border-box;
        }
        .l-header .l-header-img{
            width: 130px;
            float: left;
            padding: 2px 0px;
            box-sizing: border-box;
        }
        .l-header .nav li{
            float: left;
            height: 100%;
            padding: 5px 8px;
            box-sizing: border-box;
        }
        .body-left .breadcrumb {
            margin: 0;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .breadcrumb a {
            font-size: 1.17em;
            font-weight: 100;
            color: #255;
            text-decoration: none;
            border-left: 5px solid #277;
            padding-left: 0.5em;
        }

        .list-unstyled {
            padding-left: 0;
            list-style: none;
        }
        .news-list li {
            border-bottom: 1px solid #F2F2F2;
            overflow: hidden;
        }
        .news-list li a {
            text-decoration: none;
            display: block;
            padding: 1em 0;
            overflow: hidden;
            color: #555;
            background-color: transparent;
        }

        .news-list li h3 {
            margin: 0;
            font-weight: normal;
        }
        .news-list li small {
            padding-right: 15px;
            float: right;
        }
        small {
            font-size: 80%;
        }
        .hidden {
            display: none !important;
        }

        .body .body-right {
            width: 300px;
            float: left;
        }

         .r-search {
            box-sizing: border-box;
             display: inline-block;
             float: right;
        }

        .r-search .r-search-input {
            float: left;
            width: 235px;
            border-right: 0;
            border-radius: 2px 0 0 2px;
            display: block;
            height: 34px;
            padding: 6px 12px;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

        .r-search .r-search-button {
            float: left;
            height: 34px;
            border-radius: 0 2px 2px 0;
            border-color: #255;
            background-color: #277;
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
            color: #fff;
            display: inline-block;
            margin-bottom: 0;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .body-right .r-hot {
            width: 100%;
            padding-top: 20px;
            box-sizing: border-box;
            padding-left: 18px;
        }

        .r-hot h3 {
            margin: 8px 0;
            padding: 2px 8px;
            border-left: 5px solid #eee;
            display: block;
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            color: #277;
        }
        .list-ol {
            padding-left: 1.5em;
        }
        .list-ol li {
            padding: 3px 0;
            line-height: 1.8rem;
        }
        .list-ol li  a {
            color: #555;
            text-decoration: none;
        }
        h3 .sub_title {
            display: block;
            color: #AAA;
            text-transform: uppercase;
            font-weight: normal;
            font-size: .8rem;
        }

        .r-hot .comment-textarea {
            width: 100%;
            padding: 5px 5px;
            box-sizing: border-box;
        }

        .comment-textarea textarea {
            width: 100%;
            height: 150px;
            padding: 5px;
            font-size: 16px;
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
        }

        .comment-btn button {
            padding: 8px 10px;
            font-size: 13px;
            background-color: #277;;
            color: white;
            float: right;
            border-radius: 3px;
            border: none;
            margin-top: 5px;
        }

        .footer {
            font-size: 12px;
            overflow: hidden;
            padding: 50px 0;
            text-align: center;
            background-color: #F2F6F8;
            width: 100%;
            color: #888;
        }

        .footer .link {
            margin-bottom: 0.5em;
        }

        .footer .link a {
            color: #010101;
            font-size: 16px;
        }

        .footer .link a:hover {
            color: #388d78;
        }

        @media (max-width: 1499px) {
            .footer .link a {
                font-size: 14px;
            }
        }

        @media (max-width: 1279px) {
            .footer .link a {
                font-size: 12px;
            }
        }

        .footer .link em {
            color: #ccc;
            margin: 0 8px;
        }

        .footer .info {
            font-size: 12px;
            line-height: 2.5em;
            padding-top: 12px;
        }

        .footer .info em {
            margin: 0 0.5em;
        }

        .footer .copyright p {
            margin: 0;
        }

        .min-height {
            min-height: 800px;
        }
    </style>
</head>
<body>
<div class="container-all">
    <input type="hidden" id="news_id" value="{$newInfo.id}">
    <div class="l-header">
        <div class="l-header-img">
            <img  src="/static/index/images/brand.png" alt="">
        </div>
        <ul class="nav">
            {foreach $puTongList as $k =>$v}
            <li>
                <a href="{:url('newsCateList')}?id={$v['id']}&cate_name={$v['cate_name']}"  target="_blank"  style="font-size: 14px;color: #191413;text-decoration: none;">{$v['cate_name']}</a><!--end 6850292-0-5-->
            </li>
            {/foreach}
        </ul>
        <form action="{:url('index/search')}" class="search pull-right hidden-xs" method="POST" target="_blank">
            <div class="r-search">
                <input type="text" placeholder="请输入新闻标题" class="r-search-input" name="title" {if condition="strlen($title) > 1 "} value="{$title}" {/if} >
                <button type="button" class="r-search-button">搜索</button>
            </div>
        </form>
    </div>
    <div class="body">
        <div class="body-left min-height">

            <div class="breadcrumb">
                <!--当前位置-->
             <a href="javascript:void(0);" target="_blank" class="">{$cate_name}</a>
            </div>

            <ul class="list-unstyled news-list" id="main-news-list">
                {foreach $newsList as $k=>$v}
                    <li>
                        <a href="{:url('index/detail')}?id={$v['id']}">
                            <h3><span class="title">{$v['title']}</span>
                                <small class="time hidden-xs">{$v['create_time'] | date='Y-m-d H-i-s'}</small>
                            </h3>
                            <div class="hidden desc">{$v['title']}</div>
                            <span class="hidden keywords"></span>
                        </a>
                    </li>
                {/foreach}

            </ul>

            <!--分页-->
            <style>
                #displaypagenum {
                    overflow: hidden;
                    padding-top: 30px;
                    line-height: 22px;
                }
                #displaypagenum p {
                    padding-bottom: 0;
                }
                center {
                    text-align: -webkit-center;
                }
                #displaypagenum span.page, #displaypagenum a, #displaypagenum a.next {
                    padding: 6px 12px;
                    height: 28px;
                    background: #055;
                    color: #FFF;
                    text-decoration: none;
                    font-weight: bolder;
                    line-height: 28px;
                }
                #displaypagenum span.page, #displaypagenum a, #displaypagenum a img {
                    position: relative;
                    top: 2px;
                    height: 15px;
                }
                #displaypagenum a, #displaypagenum a {
                    background: #f3f3f3;
                    color: #333;
                    font-weight: normal;
                }
            </style>
            <div id="displaypagenum">
                <p></p>
                <center>
                    <script type="text/javascript">
                        var currentPage = Number("{$currentPage}") -1 ;//所在页从0开始
                        var prevPage = Number("{$currentPage}")-1//上一页
                        var nextPage = Number("{$currentPage}") + 1//下一页
                        var countPage = "{$countPage}"//共多少页

                        //设置上一页代码
                        if(countPage>1&&currentPage!=0&&currentPage!=1)
                            document.write("<a href=\"{:url('newsCateList')}?page=1&cate_id={$cate_id}&cate_name={$cate_name}\"><img src='/static/index/images/next_08.jpg' /></a><a href=\"{:url('newsCateList')}?page=" + (prevPage) + "&cate_id={$cate_id}&cate_name={$cate_name}\"><img src='/static/home/index/next_03.jpg' /></a>");
                        else if(countPage>1&&currentPage!=0&&currentPage==1)
                            document.write("<a href=\"{:url('newsCateList')}?page=1&cate_id={$cate_id}&cate_name={$cate_name}\"><img src='/static/index/images/next_08.jpg' /></a><a href=\"{:url('newsCateList')}?page=1&cate_id={$cate_id}&cate_name={$cate_name}\"><img src='/static/index/images/next_03.jpg' /></a>");
                        else
                            document.write("<a style='text-decoration:none;'><img src='/static/index/images/next_08.jpg' /></a><a style='text-decoration:none;'><img src='/static/index/images/next_03.jpg' /></a>");

                        //循环
                        var num = 5;
                        for(var i=0+(currentPage-1-(currentPage-1)%num) ; i<=(num+(currentPage-1-(currentPage-1)%num))&&(i<countPage) ; i++){
                            if(currentPage==i )
                                document.write("<a style='color:#0081cc;' rel='external'><b>"+(i+1)+"</b></a>");
                            else if(i==0)
                                document.write("<a href=\"{:url('newsCateList')}?page=1&cate_id={$cate_id}&cate_name={$cate_name}\" rel='external'><b>"+(i+1)+"</b></a>");
                            else
                                document.write("<a href=\"{:url('newsCateList')}?page=" + (i+1) + "&cate_id={$cate_id}&cate_name={$cate_name}\" rel='external'><b>"+(i+1)+"</b></a>");
                        }

                        //设置下一页代码
                        if(countPage>1&&(currentPage +1) != countPage)
                            document.write("<a href=\"{:url('newsCateList')}?cate_id={$cate_id}&cate_name={$cate_name}&page=" + (nextPage) + "\"><img src='/static/index/images/next_05.jpg' /></a><a href=\"{:url('newsCateList')}?cate_id={$cate_id}&cate_name={$cate_name}&page=" + countPage + "\"><img src='/static/index/images/next_11.jpg' /></a>");
                        else
                            document.write("<a style='text-decoration:none;'><img src='/static/index/images/next_05.jpg' /></a><a style='text-decoration:none;'><img src='/static/index/images/next_11.jpg' /></a>");

                    </script>
                </center>
                <p></p>
            </div>
        </div>
        <div class="body-right">
            <div class="r-hot">
                <h3>
                    <span class="title">最新文章</span>
                    <span class="sub_title">News Article</span>
                </h3>
                <ol class="list-ol" id="NEW-YAOWENTUIJIAN">
                    {foreach $newsArticle as $k=>$v}
                    <li>
                        <a href="{:url('index/detail')}?id={$v['id']}" target="_blank">{$v['title']}</a>
                    </li>
                    {/foreach}
                </ol>
            </div>
        </div>
    </div>
</div>
{include file="common/footer"/}
</body>
</html>